<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="7" :xs="24" style="margin-left: 100px">
                <el-card class="box-card">
                    <template v-slot:header>
                        <div class="clearfix">
                            <span>我的信息</span>
                        </div>
                    </template>
                    <div>
                        <div class="text-center">
                            <userAvatar />
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <svg-icon icon-class="user" />用户名称
                                <div class="pull-right">{{ state.user.userName }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="phone" />手机号码
                                <div class="pull-right">{{ state.user.phonenumber }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="email" />用户邮箱
                                <div class="pull-right">{{ state.user.email }}</div>
                            </li>

                            <li class="list-group-item">
                                <svg-icon icon-class="peoples" />所属角色
                                <div class="pull-right">{{ state.roleGroup }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="date" />创建日期
                                <div class="pull-right">{{ state.user.createTime }}</div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="15" :xs="24" >
                <el-card>
                    <el-tabs v-model="notificationTab">
                        <el-tab-pane label="通知" name="notifications">
                            <el-alert
                                    title="学生选课通知"
                                    type="warning"
                                    description="有新学生选了您的课！"
                                    show-icon
                                    close-text="收到"
                            />
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
                <el-card>
                    <el-tabs v-model="courseTab">
                        <el-tab-pane label="我的授课" >
                            <el-table :data="courseList" height="380" style="width: 100%" >
<!--                                图片imgs-->
                                <el-table-column prop="imgs" label="课程封面" width="180">
                                    <template #default="scope">
                                        <image-preview :src="scope.row.imgs" :width="140" :height="100"/>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="课程名称" width="180">
                                </el-table-column>
                                <el-table-column prop="hours" label="课时数" width="180"></el-table-column>
                                <el-table-column prop="credits" label="学分" width="180"></el-table-column>
<!--                                <el-table-column prop="starttime" label="开始时间" width="180"></el-table-column>-->
<!--                                <el-table-column prop="endtime" label="结束时间" width="180"></el-table-column>-->
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>

        </el-row>
    </div>
</template>

<script setup name="Profile">
    import userAvatar from "@/views/system/user/profile/userAvatar.vue";
    import userInfo from "@/views/system/user/profile/userInfo.vue";
    import resetPwd from "@/views/system/user/profile/resetPwd.vue";
    import { getUserProfile } from "@/api/system/user";
    import { ref, reactive , onMounted , onBeforeUnmount} from 'vue';
    import { listCourse } from '@/api/course/course';
    const notificationTab = ref(localStorage.getItem('notificationTab') || 'notifications');
    const courseTab = ref(localStorage.getItem('courseTab') || 'courses');
    // 在页面离开或卸载前保存当前 tab 状态
    onBeforeUnmount(() => {
        localStorage.setItem('notificationTab', notificationTab.value);
        localStorage.setItem('courseTab', courseTab.value);
    });
    // const activeTab = ref("userinfo");
    const state = reactive({
        user: {},
        roleGroup: {},
        postGroup: {}
    });
    const queryParams = reactive({
        userId: null
    });

    function getUser() {
        getUserProfile().then(response => {
            state.user = response.data;
            state.roleGroup = response.roleGroup;
            state.postGroup = response.postGroup;
            queryParams.userId = state.user.userId;
            getList();
        });
    };
    onMounted(() => {
        getUser(); // 组件挂载后立即获取用户信息
    });
    const courseList = ref([]);
    const total = ref(0);
    // const loading = ref(true);

    function getList() {

        listCourse(queryParams).then(response => {
            //对比response.userId，
            courseList.value = response.rows;
            total.value = response.total;
            // loading.value = false;
        });
    }



</script>
<style>
    .el-alert {
        margin: 20px 0 0;
    }
    .el-alert:first-child {
        margin: 0;
    }
</style>